<!-- src/views/nurse/nurse_user_orders/components/ConditionDisplay.vue -->
<template>
  <div class="condition-display">
    
  </div>
</template>

<script lang="ts" setup>
import { ref, defineProps, onMounted } from 'vue';
import { defHttp } from '/@/utils/http/axios';

/* 使用安好医护端接口请求头 */
const url_head = 'https://anfine.huasun-healthcare.com:80/api_anhao'; //线上
// const url_head = 'http://127.0.0.1:8085/jeecg-boot'; //本机

// 定义props
const props = defineProps({
  orderId: {
    type: String,
    default: ''
  }
});

// 可以在这里定义一些内部逻辑，例如根据selectedOption动态加载数据等
const loadData = async () => {
  console.log('props', props);
  try {
    
  } catch (error) {
    console.error('加载数据失败:', error);
  }
}

// 获取图片URL的函数，处理不同的数据结构
const getImageUrl = (imgData: any) => {
  console.log('imgData:', imgData);
  if (!imgData) return '';
  
  // 如果imgData本身就是URL字符串
  if (typeof imgData === 'string') {
    return imgData.startsWith('http') ? imgData : url_head + imgData;
  }
  
  // 如果imgData是对象，尝试获取url属性
  if (imgData.url) {
    return imgData.url.startsWith('http') ? imgData.url : url_head + imgData.url;
  }
  
  // 如果imgData有其他可能的图片路径属性
  if (imgData.path) {
    return imgData.path.startsWith('http') ? imgData.path : url_head + imgData.path;
  }
  
  // 如果都没有，返回空
  return '';
};

onMounted(() => {
  loadData();
});

// 图片加载错误处理
const handleImageError = (event: any) => {
  console.error('图片加载失败:', event);
  event.target.style.display = 'none';
};
</script>

<style scoped>
.condition-display {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
  width: 100%;
  height: 100%;
  gap: 20px;
}

.condition-display-group {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
  width: 100%;
  height: 100%;
  gap: 20px;
}

.record-item {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
  padding: 8px;
  box-sizing: border-box;
  min-width: 0;
}

.describe {
  padding-left: 24px;
  font-size: 13px;
  color: grey;
  word-wrap: break-word;
}

.title {
  font-weight: bold;
  margin-bottom: 10px;
}

.content {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.content div {
  flex: 1;
}

.content img {
  max-width: 100%;
  height: auto;
}

.FamilyVerify, .OptReady {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
  padding: 8px;
  box-sizing: border-box;
  min-width: 0;
}

.optItem {
  display: flex;
  flex-direction: column;
}

.no-image {
  display: flex;
  justify-content: center;
  color: gray;
}
</style>
